{% extends 'layout.html' %}

{% block content %}

    <h4>角色列表</h4>

    <div class="row" style="margin-top: 20px; margin-bottom: 20px">
        <div class="col-md-9">
            {% if per.add %}
                <btn class="btn btn-primary" id="add_roleinfo">添加角色</btn>
            {% endif %}
        </div><!-- /.col-lg-6 -->

        <div class="col-md-3">
            <form>
                <div class="input-group">
                    {% if appname %}
                        <input type="text" class="form-control" name="appname" value="{{ appname }}">
                    {% else %}
                        <input type="text" class="form-control" name="appname" placeholder="模糊搜索角色">
                    {% endif %}

                    <span class="input-group-btn">
                    <button class="btn btn-info" type="submit">搜索</button>
                  </span>
                </div><!-- /input-group -->
            </form>
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

    <div class="modal fade" id="role_info" tabindex="-1" role="dialog">
        <div class="modal-dialog  modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加角色信息</h4>
                    <button type="button" class="close" data-dismiss="modal" data-target="bs-example-modal-lg"
                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="env_name" class="control-label">角色:</label>
                            <input type="text" class="form-control" id="role_name" placeholder="角色">
                        </div>
                        <div class="form-group">
                            <label for="">权限:</label>
                            <div class="form-group" style="margin-left: 20px">
                                <label for="dashboard" class="control-label">主界面:</label>
                                <div class="card-body" id="">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="" checked="">
                                        <span class="form-check-sign">添加应用信息</span>
                                    </label>

                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <span class="form-check-sign">删除应用信息</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" style="margin-left: 20px">
                                <label for="env_name" class="control-label">用户管理:</label>
                                <div class="card-body">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="" checked="">
                                        <span class="form-check-sign">添加应用信息</span>
                                    </label>

                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <span class="form-check-sign">删除应用信息</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" style="margin-left: 20px">
                                <label for="env_name" class="control-label">角色管理:</label>
                                <div class="card-body">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="" checked="">
                                        <span class="form-check-sign">添加应用信息</span>
                                    </label>

                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <span class="form-check-sign">删除应用信息</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" style="margin-left: 20px">
                                <label for="env_name" class="control-label">服务管理:</label>
                                <div class="card-body">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="" checked="">
                                        <span class="form-check-sign">添加应用信息</span>
                                    </label>

                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <span class="form-check-sign">删除应用信息</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" style="margin-left: 20px">
                                <label for="env_name" class="control-label">NGINX管理:</label>
                                <div class="card-body">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="" checked="">
                                        <span class="form-check-sign">添加应用信息</span>
                                    </label>

                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <span class="form-check-sign">删除应用信息</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="close_ip">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-role_info" data-dismiss="modal">保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for role in role_lists %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ role.title }}</td>
                <td>
                    {% if per.delete %}
                        <a href="/rbac/roles/delete/{{ user.pk }}/" class="btn btn-danger">删除</a>
                    {% endif %}

                    {% if per.edit %}
                        <btn class="btn btn-warning edit_userinfo">编辑</btn>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}

        </tbody>
    </table>

{% endblock %}

{% block jss %}
    <script src="/static/rbac/roles.js"></script>
{% endblock %}